<template>
  <div class="c1" style="text-align: center; margin-top: 200px">
    <!-- 页面顶部-->
    <div id="top">
      <div class="top">
        <span style="font-size: 80px; font-weight: bolder"
          >现在登录,结账更快捷</span
        >
      </div>
    </div>
    <div id="container">
      <div id="cover" class="rt">
        <form id="form-login">
          <div class="txt">
            <p style="font-size: 50px; font-weight: bolder">
              登录Apple Store
              <span>
                <router-link
                  to="/register"
                  style="color: #33ccff; text-decoration: none"
                  >新用户注册</router-link
                >
              </span>
            </p>
            <div class="text" style="margin-bottom:25px">
              <input
                style="width: 500px; height: 40px"
                v-model="appleId"
                type="text"
                placeholder="请输入您的邮箱名"
                name="appleId"
                id="appleId"
                required
                autofocus
              />
            </div>
            <!-- <br />
            <br />
            <br />
            <br />
            <br /> -->
            <div class="text" style="margin-bottom:25px">
              <input
                style="width: 500px; height: 40px"
                v-model="password"
                type="password"
                id="password"
                placeholder="请输入您的密码"
                name="password"
                required
                minlength="6"
                maxlength="15"
              />
            </div>
            <!-- <br />
            <br />
            <br /> -->
            <div class="chose" style="display:none">
              <input
                type="checkbox"
                class="checkbox"
                id="ck_rmbUser"
                value="0"
              />自动登录
              <span>忘记密码？</span>
            </div>
            <!-- <br />
            <br />
            <br /> -->
            <input
              style="width: 300px; height: 40px; margin-bottom: 500px; color: white; background-color: #44ccff;border-radius: 8px;border:0;cursor: pointer;"
              @click="login"
              class="button_login"
              type="button"
              value="登录"
              id="bt-login"
            />
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      appleId: "",
      password: "",
    };
  },
  methods: {
    login() {
      if (this.email != "" && this.password != "") 
      {
        var url = `http://localhost:3000/user?appleId=${this.appleId}&password=${this.password}`;
        this.axios.get(url).then((res) => {
          console.log(res.data);
          // 登录成功后: 跳转到首页
          if (res.data.length > 0) {
            alert("登录成功! 即将跳转");
             window.sessionStorage["user"] =   JSON.stringify(res.data[0]);
             window.sessionStorage.getItem('user')
            // 用户名存到vuex
            // commit: 申请,提交 - 触发vuex中指定的函数
            this.$store.commit("updateAppleId", this.appleId);
            
            console.log(this.$router)
            this.$router.go(-1);
          } else {
            alert("登录失败,请输入正确的邮箱和密码");
            window.sessionStorage["user"] = '';
          
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
  #login{
    width: 100%;
    height: 100%;
  }
</style>